{"componentChunkName":"component---src-templates-blog-post-js","path":"/react/router/","result":{"data":{"site":{"siteMetadata":{"title":"Tory","author":"[Tory]","siteUrl":"https://gatsby-starter-bee.netlify.com","comment":{"disqusShortName":"","utterances":"JaeYeopHan/gatsby-starter-bee"},"sponsor":{"buyMeACoffeeId":"jbee"}}},"markdownRemark":{"id":"caff49a8-71db-5ebe-b7b3-088316f42255","excerpt":"1. Before Jumpo into React Router ROUTER에 대해 학습하기 전 SSR과 CSR에 대해 간략하게 알고 넘어가자!\nSSR과 CSR은 페이지와 관련이 깊다. 페이지의 구조를 담당하는 HTML 파일을 어느 위치에서 생성할 것인지에 따라 SSR과 CSR로 나뉘게 된다. 1.1 SSR SSR은 사용자가 서버에게 페이지 리소스를 요청하면, 서버는 요청에 해당하는 HTML 파일을 생성하여 전송한다. 장점 HTML…","html":"

1. Before Jumpo into React Router

\n

ROUTER에 대해 학습하기 전 SSR과 CSR에 대해 간략하게 알고 넘어가자!\nSSR과 CSR은 페이지와 관련이 깊다. 페이지의 구조를 담당하는 HTML 파일을 어느 위치에서 생성할 것인지에 따라 SSR과 CSR로 나뉘게 된다.

\n

1.1 SSR

\n

SSR은 사용자가 서버에게 페이지 리소스를 요청하면, 서버는 요청에 해당하는 HTML 파일을 생성하여 전송한다.

\n

장점

\n\n

단점

\n\n

1.2. CSR

\n

CSR은 초기에 최소한의 코드를 포함한 HTML을 전송 받은 후, JS 파일을 통해 HTML의 메인 코드들을 동적으로 생성합니다.

\n

장점

\n\n

단점

\n\n

2. React Router

\n

클라이언트 사이드에서 라우팅하기 위한 라이브러리로 react-router-dom을 사용할 수 있다.

\n
    \n
  1. Router: Route(경로)들을 관리한다.
    2. \n
  2. Route: 특정 경로(path)가 입력되면 component를 렌더링 한다.
    3. \n
  3. \n

    Switch: 첫번째로 매칭되는 Route만 렌더링 되도록 하는 도구

    \n
    \n

    (switch가 없다면 루트 경로로 이동하고자 하는 경우 ”/“를 포함한 Route가 모두 렌더링 되는 문제가 발생한다. 아래 예시의 exact를 기입했음에도 dashboard, products, landing이 모두 렌더링 됨.)

    \n
    \n
    4. \n
  4. Redirect
    5. \n
\n
import {\n  BrowserRouter as Router,\n  Route,\n  Switch,\n  Redirect,\n} from 'react-router-dom';\nimport { Landing, Products, Dashboard } from 'pages';\nimport { Header, Footer } from 'containers';\n\nexport default function WireframeApp() {\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"/\" component={Landing} />\n        <Route path=\"/dashboard\" component={Dashboard} />\n        <Route path=\"/products\" component={Products} />\n        <Redirect to=\"/landing\" />\n      </Switch>\n    </Router>\n  );\n}
\n

3. storybook with router

\n

리엑트의 경우 Link 컴포넌트를 통해 경로를 이동시킬 수 있다.

\n

이 때, Link는 Router 컴포넌트 내에서만 사용할 수 있기 때문에, Link 컴포넌트를 테스트하고 싶은 경우, decorator를 사용하여 Router를 감싸 줄 수 있다.

\n
export default {\n  title: 'Components/Nav',\n  component: Nav,\n  decorators: [\n    Story => (\n      <Router>\n        <Story />\n      </Router>\n    ),\n  ],\n} as ComponentMeta<typeof Nav>;\n\nconst Template: ComponentStory<typeof Nav> = args => <Nav {...args} />;\n\nexport const Basic = Template.bind({});
","frontmatter":{"title":"router","date":"September 02, 2021"}}},"pageContext":{"slug":"/react/router/","previous":{"fields":{"slug":"/typescript/typescript-redux/"},"frontmatter":{"title":"typescript-redux","category":"typescript","draft":false}},"next":{"fields":{"slug":"/css/vertical-aline/"},"frontmatter":{"title":"vertical-align","category":"css","draft":false}}}},"staticQueryHashes":["3128451518","521680639"]}